<template>
  <f7-page @page:afterin="backInit">
    <f7-navbar :title="$t('m.withdrawal')" back-link=" ">
      <f7-nav-right v-if="cordova">
        <f7-link @click="handleScanQrCode" href="/scan/">
          <f7-icon f7="viewfinder" style="font-size: 22px;color:#000"></f7-icon>
        </f7-link>
      </f7-nav-right>
    </f7-navbar>

    <div class="content-padding">
      <div class="my-card total-card">
        <p>{{$t('m.currentAvailableBalance')}}：{{allNum}} <span>{{currency.money_type_name}}</span></p>
      </div>
      <div class="my-card" v-if="id !== '2'">
        <p>{{$t('m.chainType')}}</p>
        <single-select class="lian-types" v-model="lianType">
<!--          <single-select-item :value="1">OMNI</single-select-item>-->
          <single-select-item :value="2">ERC20</single-select-item>
        </single-select>
      </div>

      <div class="my-card withdrawal-input">
        <p>{{$t('m.withdrawalAmount')}}</p>
        <line-input type="number" :placeholder="`可用${allNum}`" v-model="withdrawFormItems.num" @buttonClick="setAll"></line-input>
        <div>
<!--          <p>{{$t('m.withdrawalFeeTips')}}</p>-->
          <p>{{$t('m.dailyWithdrawalLimit')}} {{userInfo.user_money[id].tixian_max_num}}{{currency.money_type_name}}</p>
          <p>{{$t('m.usedToday')}} <span>{{todayUse}}</span> {{currency.money_type_name}}</p>
        </div>
      </div>

      <custom-input :placeholder="$t('m.reg2')" button v-model="withdrawFormItems.code" :send-status="smsStatus" @send-sms="handleSendSms"></custom-input>
      <div class="my-card no-padding">
        <f7-list class="no-hairline-top withdraw-address-list">
          <f7-list-item :title="$t('m.selectAddress')" :link="`/withdrawal-address/?id=${id}`">
            <div slot="after" class="address-inner" v-if="$store.state.withdrawAddress">
              {{$store.state.withdrawAddress.tag}}：{{$store.state.withdrawAddress.address}}
            </div>
          </f7-list-item>
          <f7-list-item :title="$t('m.remark')" class="line-input-f7-list-item no-hairline-bottom">
            <input type="text" :placeholder="`(${$t('m.optional')})`" slot="after" v-model="withdrawFormItems.beizhu">
          </f7-list-item>
        </f7-list>
      </div>
      <p class="fee-p">{{$t('m.handlingFee')}}：<span>{{getFee}}{{currency.money_type_name}}</span></p>

      <f7-button fill color="blue" large @click="handleWithdraw">{{$t('m.confirm')}}</f7-button>
    </div>

    <!--<div class="tips-container">
      <p>{{$t('m.wenxinTips')}}:</p>
      爱上飞机爬山法阿斯蒂芬怕时代峻峰片健身房<br>
      asdfafsdasdfdfjapsffasfaspfjasf<br>
    </div>-->

  </f7-page>
</template>

<script>
  import SingleSelect from '../ajComponents/singleSelect/singleSelect';
  import SingleSelectItem from '../ajComponents/singleSelect/singleSelectItem';
  import LineInput from '../ajComponents/line-float-input';
  import { mapGetters } from 'vuex';
  import { todayUse, runWithdraw } from "../api/home";
  import {sendPhoneCode} from "../api";

  export default {
    name: "withdrawal",
    data () {
      return {
        lianType: 2,
        todayUse: '',
        withdrawFormItems: {
          currency_id: this.$f7route.context.id,
          num: '',
          address: '',
          beizhu: '',
          code: ''
        },
        smsStatus: false
      }
    },
    computed: {
      ...mapGetters(['userInfo']),
      id() {
        return this.$f7route.context.id
      },
      currency() {
        return this.userInfo.user_money[this.id];
      },
      allNum() {
        return this.userInfo.user_money[this.id].num;
      },
      getFee() {
        if (this.id === '1') return this.$store.getters.config.config.usdt_tibi_fee;
        return (this.withdrawFormItems.num * this.currency.coin_out_fee).toFixed(4);
      },
      cordova() {
        return window.cordova;
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        todayUse({currency_id: this.id}).then(res => {
          this.todayUse = res.data;
        })
      },
      setAll() {
        this.withdrawFormItems.num = parseFloat(this.allNum);
      },
      backInit() {
        if(this.$store.state.withdrawAddress) {
          this.withdrawFormItems.address = this.$store.state.withdrawAddress.address;
        }
      },
      handleSendSms() {
        sendPhoneCode({ phone: this.$store.getters.userInfo.user.phone, type: 7}).then(() => {
          this.smsStatus = true;
        })
      },
      handleWithdraw() {
        /*if (this.withdrawFormItems.num < parseFloat(this.currency.coin_out_min)) {
          this.$toast(this.$t('m.minimumWithdrawal')+this.currency.coin_out_min);
          return;
        }
        if (this.withdrawFormItems.num > parseFloat(this.currency.coin_out_max)) {
          this.$toast(this.$t('m.maximumWithdrawal')+this.currency.coin_out_max);
          return;
        }*/
        runWithdraw(this.withdrawFormItems).then((res) => {
          /*if (res.type === 1 || res.type === 2) {
            this.$store.dispatch('GetCurrencyInfo');
          }*/
          this.$f7router.back();
        })
      },
      handleScanQrCode() {
        let that = this;
        cordova.plugins.barcodeScanner.scan(
          function(result) {
            //扫码成功后执行的回调函数
           console.log(result.text);
           if(result.text) {
             that.$f7router.back();
             that.withdrawFormItems.address = result.text;
           }
          },
          function(error) {
            //扫码失败执行的回调函数
            alert("Scanning failed: " + error);
          }, {
            preferFrontCamera: false, // iOS and Android 设置前置摄像头
            showFlipCameraButton: false, // iOS and Android 显示旋转摄像头按钮
            showTorchButton: false, // iOS and Android 显示打开闪光灯按钮
            torchOn: false, // Android, launch with the torch switched on (if available)打开手电筒
            prompt: "在扫描区域内放置二维码", // Android提示语
            resultDisplayDuration: 500, // Android, display scanned text for X ms.
            //0 suppresses it entirely, default 1500 设置扫码时间的参数
            formats: "QR_CODE", // 二维码格式可设置多种类型
            orientation: "portrait", // Android only (portrait|landscape),
                                     //default unset so it rotates with the device在安卓上 landscape 是横屏状态
            disableAnimations: true, // iOS     是否禁止动画
            disableSuccessBeep: false // iOS      禁止成功后提示声音 “滴”
          }
        );
      }
    },
    destroyed() {
      this.$store.commit('setWithdrawAddress', null);
    },
    components: {
      SingleSelect,
      SingleSelectItem,
      LineInput
    }
  }
</script>

<style scoped lang="scss">
  .content-padding {
    margin-top: $padding20;
    .my-card {
      margin-bottom: $padding20;
    }
    .total-card {
      p {
        display: flex;
        justify-content: space-between;
        span {
          color: $mainColor;
        }
      }
    }
    .lian-types {
      margin-top: $padding20;
    }
    .withdrawal-input {
      > div {
        p {
          margin-top: $padding20;
          font-size: 25px;
          &:first-child {
            color: $colorGrey;
          }
          span {
            color: $mainColor;
          }
        }
      }
    }
    .fee-p {
      text-align: right;
      color: $colorGrey;
      span {
        color: $mainColor;
      }
    }
    .button {
      margin: 80px 0;
    }
    .withdraw-address-list {
      /deep/ .item-after {
        width: 75%;
      }
    }
    .address-inner {
      word-break: break-all;
      white-space: normal;
      font-size: 26px;
    }
  }
</style>
